<template>
    <div class="eatBox">
        <van-sticky>
            <div class="search">
                <van-search
                    v-model="value"
                    shape="round"
                    background="#fff"
                    placeholder="请输入商品名称"
                />
            </div>
            <div class="eat_top">
                <span class="one"></span>
                <span class="two">今日菜单</span>
            </div>
            <div class="header">
                <EatTabTit :list="list" class="head-l" :eatList="eatList" ></EatTabTit>
                <Popup :list="list" class="head-r" :eatList="eatList"></Popup>
            </div>
        </van-sticky>
    </div>
</template>

<script>
import EatTabTit from '@/components/EatTabTit.vue';
import Popup from '../components/Popup.vue';
// import CardView from '@/components/CardView.vue';

export default {
    name: "EatNothingView",
    data() {
        return {
            value: "",
            list: [],
            eatList:[],
            Lists:[],
        };
    },
    async mounted() {
        let res = await this.$http.getWhatToEat();
        // console.log(res) 
        this.list = res.data.data.list;
        // console.log(this.list);
        let eatList = await this.$http.getWhatToEat1();
        this.eatList = eatList.data
        // console.log(this.eatList)
    },
    components: { EatTabTit, Popup }
}
</script>

<style lang="less" scoped>
.eat_top{
    box-sizing: border-box;
    padding: 0 .4rem;
    width: 95%;
    margin: 0 auto;
    height: 4rem;
    line-height: 4rem;
    display: flex;
    align-items: center;
    .two{
        font-size: 1.2rem;
        font-weight: bold;
        margin-right: .7rem;

    }
    .one{
        
        width: .3rem;
        height: 2rem;
        display: inline-block;
        margin-right: .7rem;
        background: rgb(65, 187, 67);
    }
}
.header{
    display: flex;
    background: #fff;
}
.head-l{
    width: 75%;
}
.head-r{
    width: 22%;
}

.ti{
    width: .5rem;
    height: 2rem;
    background: #3d9157;
    margin-left: 1rem;
}
.car{
    display: flex;
    width: 100%;
    position: relative;
    card-view{
        width: 100%;
    }
    card-right{
        width: 50%;
    }
    
}
.cardScoll{
    overflow-y: auto;
    height: 80vh;
}
@media (min-width: 750px){
    html{
        font-size: 100px;
    }
    .box1{
        margin: 0 auto;
    }
}
</style>